<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" />
    <title>日志查看</title>
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="format-detection" content="telephone=no"/>
    <link rel="stylesheet" th:href="@{/lib/layui/css/layui.css}" media="all"/>
    <link rel="stylesheet" th:href="@{/css/layui-ext.css}" media="all"/>
</head>
<body class="layui-main">
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
    <legend>日志查看</legend>
</fieldset>

<form id="searchForm" class="layui-form" th:action="@{/sys_log}">
    <input type="hidden" name="page" value="0"/>
    <div class="layui-inline">
        <label class="search-form-label">实体:</label>
    </div>
    <div class="layui-inline">
        <select name="entity">
            <option></option>
            <option value="">全部</option>
            <option th:each="item : ${entityEnums}" th:value="${item.name}" th:text="${item.text}"
                    th:selected="${obj.entity!=null and item.name == obj.entity.name}"></option>
        </select>
    </div>
    <div class="layui-inline">
        <label class="search-form-label">操作类型:</label>
    </div>
    <div class="layui-inline">
        <select name="operation">
            <option></option>
            <option value="">全部</option>
            <option th:each="item : ${operationEnums}" th:value="${item.name}" th:text="${item.text}"
                    th:selected="${obj.operation!=null and item.name == obj.operation.name}"></option>
        </select>
    </div>
    <div class="layui-inline" style="margin-right:5px;">
        <button class="layui-btn">
            查询
        </button>
    </div>
</form>

<div>
    <table class="layui-table">
        <colgroup>
            <col width="60"/>
            <col width="100"/>
            <col width="100"/>
            <col width="250"/>
            <col width="250"/>
            <col width="100"/>
            <col width="200"/>
            <col/>
        </colgroup>
        <thead>
        <tr>
            <th>序号</th>
            <th>实体</th>
            <th>操作类型</th>
            <th>原值</th>
            <th>新值</th>
            <th>用户</th>
            <th>时间</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="item:${pageList.content}">
            <td>
                <span th:text="${(pageList.number*pageList.size)+itemStat.index+1}"></span>
            </td>
            <td>
                <span th:if="${item.entity!=null}" th:text="${item.entity.text}"></span>
            </td>
            <td>
                <span th:text="${item.operation.text}"></span>
            </td>
            <td class="layui-elip" style="max-width:220px;">
                <span th:text="${item.originalValue}"></span>
            </td>
            <td class="layui-elip" style="max-width:220px;">
                <span th:text="${item.targetValue}"></span>
            </td>
            <td>
                <span th:text="${item.userName}"></span>
            </td>
            <td>
                <span th:text="${#dates.format(item.createTime, 'yyyy-MM-dd HH:mm:ss')}"></span>
            </td>
        </tr>
        </tbody>
    </table>
    <div id="paged"></div>
</div>
<script th:src="@{/lib/layui/layui.js}"></script>
<script type="text/javascript" th:inline="javascript">
    var entityEnums = /*[[${obj}]]*/'';
    console.log(entityEnums);
    layui.config({
        base:'/lib/layui/lay/modules'
    }).use(['element','layer','laypage','form'], function(){
        var element = layui.element(),
            $ = layui.jquery,
            form = layui.form(),
            laypage=layui.laypage;

        laypage({
            cont: 'paged', //容器。值支持id名、原生dom对象，jquery对象。
            pages: [[${pageList.totalPages}]], //通过后台拿到的总页数
            curr: [[${pageList.number}+1]], //当前页
            skip: false, //是否开启跳页
            jump: function(obj, first){ //触发分页后的回调
                var jumpNum = obj.curr - 1;
                if(!first) {
                    $("input[name='page']").val(jumpNum);
                    $("#searchForm").submit();

                }
            }
        });
    });
</script>
</body>
</html>